<template>
  <div class="home" @click="showLan = false">
    <!-- <div class="home-bg">
      <img src="../assets/home-bg-top.jpg" alt="">
      <img src="../assets/home-bg-center.jpg" alt="">
      <img src="../assets/home-bg-bottom.jpg" alt="">
    </div> -->
    <div v-show="showPage == 'home'">
      <div class="home-lan">
        <div class="home-lan-sel" @click.stop="lancli">
          <img :src="lanList[lanSel].src" alt="">
          <span>{{lanList[lanSel].name}} </span> 
          <i :class="!showLan?'rightDown':'rightUp'"></i>       
        </div>
        <div class="home-lan-list" v-if="showLan">
          <div v-for="(val,index) in lanList" :key="index" @click="lanListCli(index)">
            <img :src="lanList[index].src" alt="">
            <span>{{lanList[index].name}} </span>  
          </div>
        </div>
      </div>
      <div class="home-nav">
        <div class="home-nav-left" v-if="userAddress">BNB {{$t('user.Wallet')}}: {{ContractAddress(userAddress)}}</div>
        <div class="home-nav-left" v-else style="padding-left: 0px;text-align: center;height: 32px;line-height:31px;" @click="logoMask">Connect MetaMask</div>
        <div class="home-nav-right" v-if="userAddress">
          <div>
            <div>{{$t('user.home2')}} </div>
            <div> {{userBalance == 0?0:formatDecimal(userBalance,6)}}</div>
          </div>
        </div>
      </div>
      <div class="home-box">
        <div class="home-logo">
          <img src="../assets/logo.png" alt="">
        </div>
        <div class="home-title">{{$t('user.home1')}}</div>
        <div class="home-title2">
          $<countTo :startVal='startVal' :decimals="2" :endVal='SUN' :duration='duration'></countTo>
        </div>
        <div class="home-how">
          <div class="home-how1" @click="showPage = 'employ'">{{$t('user.home3')}}</div>
          <div :class="$i18n.locale == 'zh'?'home-how2 home-how-linheight2':'home-how2'" @click="showPage = 'worke'">{{$t('user.home4')}}</div>
          <div :class="$i18n.locale == 'zh'?'home-how3 home-how-linheight3':'home-how3'" @click="showPage = 'statistics'">{{$t('user.home5')}}</div>
        </div>
        <div class="home-join">
          <div class="home-join-bg">
            <div class="home-join-top">{{$t('user.home6')}}</div>
            <div class="home-join-input">
              <input v-model="input" type="text">
              <span>BNB</span>
            </div>
            <div class="home-join-box">
              <div @click="addNum(0.05)">+0.05 BNB</div>
              <div @click="addNum(0.25)">+0.25 BNB</div>
              <div @click="addNum(1)">+1 BNB</div>
            </div>
            <div class="home-join-box">
              <div @click="addNum(5)">+5 BNB</div>
              <div @click="addNum(10)">+10 BNB</div>
              <div @click="addNum(20)">+20 BNB</div>
            </div>
            <div class="home-join-btn">
              <div @click="input = 0">{{$t('user.home7')}}</div>
              <div @click="jionClick">{{$t('user.home8')}}</div>
            </div>
            <div class="home-join-bottom">
              To join the project you need to use the Binance Smart Chain wallet
              <span class="home-join-red" @click="showPage = 'employ'">READ MORE</span>
            </div>
          </div>
        </div>
        <!-- 智能合约   -->
        <div class="home-join-bline">
          <div class="home-join-bg padding60">
            <div class="home-join-top">{{$t('user.home9')}}</div>
            <div class="home-join-line"  v-for="(item,index) in list" :key="item+index">
              <!-- <div>{{$t('user.home10')}}</div> -->
              <div>{{item.name}}</div>
              <div v-if="index==0">
                <a style="color:#fff;text-decoration:underline;" href="https://bscscan.com/address/0xFf3B45491f449C5265D1DcA2fc62B011Da879bF3" target="_blank">0xFf...9bF3</a>              
              </div>
              <div v-else-if="index==6"  v-timer="timedata">00:00:00</div>
              <div v-else>
                {{item.value}} 
                <span v-if="index>0 && index !=2 && index !=6 && index !=8">BNB</span>
                <span v-if="index==2">BEB</span>
              </div>
            </div>
          </div>
        </div>
      <!-- 个人数据 -->
        <div class="home-join-bline2 padding60">
          <div class="home-join-bg">
            <div class="home-join-top">{{$t('user.home36')}}</div>
            <div class="home-join-line" v-for="(item,index) in Personallist" :key="item+index">
              <div>{{item.name}}</div>
              <div v-if="index==0">
                <a style="color:#fff;text-decoration:underline;" @click="myaddress" target="_blank">{{ContractAddress(userAddress)}}</a>              
              </div>
              <div v-else-if="index !=1">
                {{item.value}} BNB
              </div>
              <div v-if="index==1" v-timer="Tiempo">00:00:00</div>
            </div>
            <div class="home-join-coin"  @click="WD">{{$t('user.home37')}}</div>
          </div>
        </div>
      <!-- 统计数据 -->
        <div class="home-join-bline3 padding60">
          <div class="home-join-bg">
            <div class="home-join-top">{{$t('user.home38')}}</div>
            <div class="home-join-line" v-for="(item,index) in statisticalList" :key="item+index">
              <div>{{item.name}}</div>
              <div>{{item.value}}</div>
            </div>
          </div>
        </div>
      <!-- 顾问数据 -->
        <div class="home-join-bline4 padding60">
          <div class="home-join-bg">
            <div class="home-join-top">{{$t('user.home39')}}</div>
            <div class="home-join-line" v-for="(item,index) in organizationList" :key="item+index">
              <div>{{item.name}}</div>
              <div>{{item.value}}</div>
              <div style="text-decoration:underline;" v-if="index == 0"
                v-clipboard="copyContent"
                v-clipboard:success="clipboardSuccessHandler"
                v-clipboard:error="clipboardErrorHandler" >
                {{$t('user.zhen106')}}
              </div>
            </div>
          </div>
        </div>
        <div class="home-join-bline5 padding60">
          <div class="home-join-bg">
            <div class="home-join-top">{{$t('user.home40')}}</div>
            <div class="home-join-line">
              <div>HazeCrypto.net</div>
              <div @click="download(1)" style="text-decoration:underline;">{{$t('user.home41')}}</div>
            </div>
            <div class="home-join-line">
              <div>Smartcontract.ru</div>
              <div @click="download(2)" style="text-decoration:underline;">{{$t('user.home41')}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-bottom">
        <div class="home-bottom-left">
          <img src="../assets/home-people.png" alt="">
          <span @click="TOUlr('https://t.me/BNBecology_Community')">{{$t('user.zhen41')}}</span>
        </div>
        <div class="home-bottom-line"></div>
        <div class="home-bottom-right">
          <img src="../assets/home-tele.png" alt="">
          <span @click="TOUlr('https://t.me/BNBecology_Channel')">{{$t('user.zhen42')}}</span>
        </div>
      </div>
      <div v-if="showPop" class="pop">
        <div class="box">
          <div class="pop-top">
            {{$t('user.end1')}}
          </div>
          <div class="pop-menu">
            <div class="pop-line">
              <div>
                <input type="text" v-model="dialogadr">
              </div>
              <div @click="dialogadr = ''">
                <img src="../assets/edit@2x.png" alt="">
              </div>
            </div>
            <div class="pop-info">
              <img src="../assets/wraning@2x.png" alt="">
              <span>{{$t('user.end2')}}</span>
            </div>            
            <div class="pop-join" @click="jonONtop">{{$t('user.home8')}}</div>
          </div>
          <img class="pop-close" @click="showPop = false" src="../assets/close@2x.png" alt="">
        </div>
      </div>
    </div>
    <div v-if="showPage != 'home'" class="other-page">
      <employ @close="close" v-if="showPage == 'employ'" />
      <statistics @close="close" v-if="showPage == 'statistics'"/>
      <worke @close="close" v-if="showPage == 'worke'"/>
    </div>
  </div>
</template>

<script>
// import { ContractAddress } from './../bsc/bnb.js';
import countTo from 'vue-count-to';
import employ from './employ.vue';
import statistics from './statistics.vue';
import worke from './worke.vue';
import Web3 from 'web3'
import { ContractInfo , getdeposit,Pool_last_draw,ConBalance,PayoutOf,UserInfo,UserInfoTotals,get ,withdraw,Earth,UseBalance} from '../bsc/bnb.js';
export default {
  name: 'home',
  data () {
    return {
      showPage:'home',
      lanList:[
        {lang:'en',name:'English',src:require('../assets/en.png')},
        {lang:'zh',name:'新加坡',src:require('../assets/zh.png')},
      ],
      lanSel:0,
      showLan: false,
      input: 0,
      showPop: false,
      userAddress:"",
      userBalance:0,      
      dialogadr:'0xD5982c06e00D327C1a65ec5246b9e8999E56f056',
      amountList:[0.05,0.25,1,5,10,20],
      list:[],
      copyContent:'',
      Personallist:[],
      dialogVisible:false,
      dialogadr:'0xD5982c06e00D327C1a65ec5246b9e8999E56f056',
      statisticalList:[],
      organizationList:[],
      SUN:0,//总和
      lgonadrss:'0',
      timedata:0,
      AddressDATA:"",
      Tiempo:"",
      poolbonussyt:0,
      depositamountsyt:0,
      payoutssyt:0,
      poolbonus:0,
      // 需要滚动的时间
      duration: 5000,
      // 初始值
      startVal: 0,
    }
  }, 
 components: { countTo,statistics,worke,employ },
  mounted() {
    if(this.$i18n.locale == 'zh'){
      this.lanSel = 1;
    }else{
      this.lanSel = 0;
    }
    this.logoMask();
  },
  watch:{
    langType:function(){
      this.handle();
      this.Personal();
      this.statistical();
      this.organization();
      this.contract();
      this.Personals();
      this.UserInfoTotals();
      this.organiza();
      
    },
    input(a,b){
      if(a.toString().split(".")[1].length <= 2){
        return
      }
      
      this.input = Number(a).toFixed(2);
    },
    lgonadrss:function(a,b){
       this.sun();
    },
    deep:true
  },
  methods: {
    close(){
      this.showPage = 'home';
    },
    addNum(nval){
      console.log(nval)
      console.log(this.input)
      this.input=Number(this.input)+Number(nval);
    },
    formatDecimal(num, decimal) {
      if(num == 0 || !num){
        return 0
      }
      num = num.toString()
      let index = num.indexOf('.')
      if (index !== -1) {
          num = num.substring(0, decimal + index + 1)
      } else {
          num = num.substring(0)
      }
      return parseFloat(num).toFixed(decimal)
    },
    ContractAddress(name){
      var len = name.length-5;
      return [...name].map((item, index, arr)=>{
          if(index>=6 && index<len){
          return ''
          }
          if(index==len){
          return '...'
          }
          if(index<6 || index>len){
          return item
          }
      }).join('')
    },
    async logoMask(){
      this.handle();
      this.Personal();
      this.statistical();
      this.organization();
      this.contract();
      this.Personals();
      this.UserInfoTotals();
      this.organiza();
      this.sun();
      const enable = await ethereum.enable();
      web3.eth.getAccounts().then((e)=>{
        console.log(e)
        this.userAddress = e[0];
        web3.eth.getBalance(e[0]).then((res)=>{
          console.log(res)
          this.userBalance = res == 0?0:Number(res)/10e17;          
          this.handle();
          this.Personal();
          this.statistical();
          this.organization();
          this.contract();
          this.Personals();
          this.UserInfoTotals();
          this.organiza();
          this.sun();
        });
      })
    },
    lancli(){
      this.showLan = true;
    },
    lanListCli(index){
      // this.$store.getters.getLang      
      this.$store.commit('setLang',this.lanList[index].lang);
      this.lanSel = index;
      localStorage.setItem('languageSet',this.lanList[index].lang);
      this.$i18n.locale = this.lanList[index].lang;
    },
    jump(str){
      this.$router.push(str);
    },
    isshowdia(){
      this.dialogadr = '';
    },
    download(num){
      if(num == 1){
          window.open("https://bnbecology.net/upload/HazeCrypto.netAuditReport.pdf")
      }else if (num == 2){
          window.open("https://bnbecology.net/upload/Smartcontract.ruAuditReport.pdf")
      }
    },
    /* 登錄 */
    LogonIn(){
       var Earths = async () =>{
    if (window.ethereum) {
        window.ethereum.request({method: "eth_accounts"}).then(res=>{
            if(res.length ==0){
              ethereum.request({ method: 'eth_requestAccounts'})
            }else{
                this.$store.commit('setLogon',true);
                  sessionStorage.setItem("userAddress", res[0]);
                  this.userAddress = res[0];
                   if(location.href.indexOf("#reloaded")==-1){
                    location.href=location.href+"#reloaded";
                    location.reload();
                  }
            }
                })   
    } else {
        setTimeout(async () => {
            await Earths();
        }, 100);
    }
          
        };
    Earths();
    },
    myaddress(){
      let snets ="https://bscscan.com/address/"+this.userAddress;
      window.open(snets)
    },
    /* 点击跳转 */
    TOUlr(ulr){

      window.open(ulr)
    },
      /* 金额格式化 */ 
    scientificToNumber (inputNumber) {
        if (isNaN(inputNumber)) {
                return inputNumber
            }
            inputNumber = '' + inputNumber
            inputNumber = parseFloat(inputNumber)
            let eformat = inputNumber.toExponential() // 转换为标准的科学计数法形式（字符串）
            let tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
            let number = inputNumber.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2]))
            return number
    },
     /* 只能合约数据的中英文数据处理 */
    handle(){
      this.list = [];
      let arr = [];
      arr.push(this.in18.zhen11)
      
      arr.push(this.in18.zhen12)
      arr.push(this.in18.zhen13)
      arr.push(this.in18.zhen14)
      arr.push(this.in18.zhen15)
      arr.push(this.in18.zhen16)
      arr.push(this.in18.zhen17)
      arr.push(this.in18.zhen18)
      arr.push(this.in18.zhen39);
      for(let i in arr){
        let obj = {
          name:arr[i],
          value:"---"
        }
        this.list.push(obj)
      }
     
    },
    /* 个人数据的中英文数据处理 */
    Personal(){
      this.Personallist = [];
      let arr = [];
      arr.push(this.in18.zhen22)
      arr.push(this.in18.zhen23)
      arr.push(this.in18.zhen24)
      arr.push(this.in18.zhen25)
      arr.push(this.in18.zhen26)
      arr.push(this.in18.zhen27)
      arr.push(this.in18.zhen28)
      arr.push(this.in18.bu1)
      arr.push(this.in18.zhen29)
      arr.push(this.in18.zhen30)
      
      for(let i in arr){
        let obj = {
          name:arr[i],
          value:"---"
        }
        this.Personallist.push(obj)
      }
      
    },
    /* 提现 */
    WD(){
      if(this.userAddress  == '' || this.userAddress == undefined){

         this.$message({
          message: this.in18.zhen121,
          type: 'warning',
        });

      }else{
        var WDs = async () =>{
            if (window.ethereum) {
                const nodes = await window.ethereum.isConnected();
                if (nodes){
                    // var web3 = new Web3(window.ethereum || new Web3.providers.HttpProvider('https://bsc-dataseed1.binance.org:443'));
                    // var web3 = new Web3(window.ethereum || new Web3.providers.HttpProvider('https://data-seed-prebsc-1-s1.binance.org:8545'));
              
                   var  abi =  [{"inputs":[{"internalType":"address payable","name":"development_address","type":"address"},{"internalType":"address payable","name":"beb_address","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"DirectPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"LimitReached","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"MatchPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"NewDeposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"NewRewards","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"PoolPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"upline","type":"address"}],"name":"Upline","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Withdraw","type":"event"},{"inputs":[],"name":"BEB_token","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"contractInfo","outputs":[{"internalType":"uint256","name":"_total_users","type":"uint256"},{"internalType":"uint256","name":"_total_deposited","type":"uint256"},{"internalType":"uint256","name":"_total_rewards","type":"uint256"},{"internalType":"uint256","name":"_total_withdraw","type":"uint256"},{"internalType":"uint40","name":"_pool_last_draw","type":"uint40"},{"internalType":"uint256","name":"_pool_balance","type":"uint256"},{"internalType":"uint256","name":"_pool_lider","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"cycles","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_upline","type":"address"}],"name":"deposit","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"name":"development_fund","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"maxPayoutOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"payoutOf","outputs":[{"internalType":"uint256","name":"payout","type":"uint256"},{"internalType":"uint256","name":"max_payout","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"poolTopInfo","outputs":[{"internalType":"address[10]","name":"addrs","type":"address[10]"},{"internalType":"uint256[10]","name":"deps","type":"uint256[10]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_balance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_cycle","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_last_draw","outputs":[{"internalType":"uint40","name":"","type":"uint40"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint8","name":"","type":"uint8"}],"name":"pool_top","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"address","name":"","type":"address"}],"name":"pool_users_refs_deposits_sum","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"ref_bonuses","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_deposited","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_rewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_users","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_withdraw","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"userInfo","outputs":[{"internalType":"address","name":"upline","type":"address"},{"internalType":"uint40","name":"deposit_time","type":"uint40"},{"internalType":"uint256","name":"deposit_amount","type":"uint256"},{"internalType":"uint256","name":"payouts","type":"uint256"},{"internalType":"uint256","name":"direct_bonus","type":"uint256"},{"internalType":"uint256","name":"pool_bonus","type":"uint256"},{"internalType":"uint256","name":"match_bonus","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"userInfoTotals","outputs":[{"internalType":"uint256","name":"referrals","type":"uint256"},{"internalType":"uint256","name":"total_deposits","type":"uint256"},{"internalType":"uint256","name":"total_payouts","type":"uint256"},{"internalType":"uint256","name":"total_structure","type":"uint256"},{"internalType":"uint256","name":"srewards","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"users","outputs":[{"internalType":"uint256","name":"cycle","type":"uint256"},{"internalType":"address","name":"upline","type":"address"},{"internalType":"uint256","name":"referrals","type":"uint256"},{"internalType":"uint256","name":"payouts","type":"uint256"},{"internalType":"uint256","name":"direct_bonus","type":"uint256"},{"internalType":"uint256","name":"pool_bonus","type":"uint256"},{"internalType":"uint256","name":"match_bonus","type":"uint256"},{"internalType":"uint256","name":"deposit_amount","type":"uint256"},{"internalType":"uint256","name":"deposit_payouts","type":"uint256"},{"internalType":"uint40","name":"deposit_time","type":"uint40"},{"internalType":"uint256","name":"total_deposits","type":"uint256"},{"internalType":"uint256","name":"total_payouts","type":"uint256"},{"internalType":"uint256","name":"total_structure","type":"uint256"},{"internalType":"uint256","name":"srewards","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"withdraw","outputs":[],"stateMutability":"nonpayable","type":"function"}];
                  
                  var myContract = new web3.eth.Contract(abi,'0xFf3B45491f449C5265D1DcA2fc62B011Da879bF3');                          
                     if ( parseFloat(this.Personallist[9].value) + parseFloat(this.Personallist[4].value)  + parseFloat(this.Personallist[5].value) +  parseFloat(this.poolbonus) < 0.0001) {
                        this.$message({
                            message: this.in18.zhen123,
                            type: 'warning',
                            duration:6000,
                        });
                          return "";
                     }
                     if ( this.payoutssyt  >=  this.depositamountsyt * 2.0) {
                          this.$message({
                            message: this.in18.zhen124,
                            type: 'warning',
                             duration:6000,
                        });
                           return "";
                     }
                    // console.log( parseFloat(this.Personallist[8].value) + parseFloat(this.Personallist[4].value)  + parseFloat(this.Personallist[5].value) +  parseFloat(this.poolbonus) ,55555);
                        myContract.methods.withdraw().send({from:this.userAddress});

                } else {
                    setTimeout(async () => {
                        await WDs();
                    }, 100);
                }
            } else {
                console.error('wait for tronLink');
                setTimeout(async () => {
                    await WDs();
                  }, 100);
              }
        };
       WDs();
      }
    },
    
    /* 统计数据的中英文数据处理 */
    statistical(){
      this.statisticalList = [];
      let arr = [];
      arr.push(this.in18.zhen32)
      arr.push(this.in18.zhen33)
      arr.push(this.in18.zhen34)
      for(let i in arr){
        let obj = {
          name:arr[i],
          value:"---"
        }
        this.statisticalList.push(obj)
      }
      
    },
    /* 组织数据的中英文数据处理 */
    organization(){
      this.organizationList = [];
      let arr = [];
      arr.push(this.in18.zhen36);
      arr.push(this.in18.zhen37);
      arr.push(this.in18.zhen38);
      arr.push(this.in18.zhen19);
      for(let i in arr){
        let obj = {
          name:arr[i],
          value:"---"
        }
        this.organizationList.push(obj);
      }
      
    },
    choicemoney(item){
      this.input = item;
       
    },
    /* 小数处理 */
    Decimal(Numero){
      let Nume = Numero.toString();
      // console.log(Nume);
      let arr = Nume.split('.');
      let isindex = Nume.indexOf('.')
      let end = '';
      if(isindex != -1){
        if(arr[1].length>6){
          end =  arr[1].substring(0,6)
           return arr[0]+"."+end;
        }else{
        return Numero;
      }
       
      }else{
        return Numero;
      }
    },
    Toulr(ulr){
      this.$router.push(ulr)
    },
    /* 撤销 */
    rovme(){
      this.input = 0;
    },
    /* 总数据接口 */
    sun(){
      ContractInfo().then(res=>{
        this.$set(this.list[1],"value",this.formatDecimal(this.scientificToNumber(res._total_deposited),2));
        this.$set(this.list[2],"value",this.formatDecimal(this.scientificToNumber(res._total_rewards),0));

        this.$set(this.list[4],"value",this.formatDecimal(this.scientificToNumber(res._total_withdraw),2));
        this.$set(this.list[5],"value",this.formatDecimal(this.scientificToNumber(res._pool_balance),2));
        sessionStorage.setItem("pollba",this.formatDecimal(res._pool_balance,2));
        this.$set(this.list[7],"value",this.formatDecimal(this.scientificToNumber(res._pool_lider),2));
        this.$set(this.list[8],"value",this.formatDecimal(this.scientificToNumber(res._total_users),0));
      })
    },
    /*  加入接口*/
    jionClick(){
      this.dialogadr = '0xD5982c06e00D327C1a65ec5246b9e8999E56f056'
      /* 用户刷新判断是否连接过钱包 */
     if(this.input>=0.05){
        if(this.userAddress  == ''  || this.userAddress == "undefined"){
          this.showPop = false;
         this.$message({
          message: this.$t('user.zhen121'),
          type: 'warning',          
          duration:6000,
          center:'center',
        });
     
      }else{
        this.showPop = true;
        let upID = '0xD5982c06e00D327C1a65ec5246b9e8999E56f056';
        var sHref = window.location.href;
     
        if(sHref.indexOf("=") != -1){
          var args = sHref.split('=');
          var args2 = args[1].split('#');
          var args3 = args2[0].split('&');
          upID = args3[0];
          if(sHref.indexOf("ref") != -1){
            this.dialogadr = upID;
          } 
         
        }
      }
     }else{
       this.showPop = false;
       this.$message({
          message: this.$t('user.zhen122'),
          type: 'warning'
        });
     }
    },
    /* 加入弹窗内部的加入按钮事件 */
    jonONtop(){
        let Address = this.userAddress;
        let amount = this.input * 1e18;
        let upID = this.dialogadr;
        if(this.dialogadr == ''){
         upID = '0xD5982c06e00D327C1a65ec5246b9e8999E56f056';
      }
        //查询账户余额：
        UseBalance(Address).then(res=>{
           this.dialogVisible = false;
                  // alert(upID)
                  // alert(Address)
                  // alert(amount)
              if(res >= amount + 2 * 1e15){
                  
                  this.jionGame(upID,Address,amount);
              }else {
                this.$message({
                    message: this.$t('user.zhen108'),
                    type: 'warning',          
                    duration:5000,
                    center:'center',
                  });
              }  
          });
    },
    /* 智能合约接口 */
    contract(){
      let smardss = '0xFf...9bF3';//智能合约地址   
      /* 倒计时 */
      Pool_last_draw().then(res=>{
        this.timedata = parseInt(res) * 1000
      })
      ConBalance().then(res=>{
        this.$set(this.list[3],"value", this.formatDecimal(this.scientificToNumber(res),2));
        let asun = res; 
        get("https://binance.defiweb.cn/api/v3/ticker/price",{symbol:"BNBUSDT"}).then(res=>{
            this.SUN =Number(this.Decimal(this.scientificToNumber( asun * parseInt(res.price))));
        })
      })
      this.$set(this.list[0],"value",smardss)
   
    },
    /* 个人信息接口 */
    Personals(){
      if(this.userAddress != null ){

          let disLength = this.userAddress.length;
          let usermy = this.userAddress.substring(0,4)+"..."+ this.userAddress.substring(disLength-4,disLength);
      
          this.$set(this.Personallist[0],"value",usermy);
          let weitibisun = 0;
        UserInfo(this.userAddress).then(res=>{
          this.Tiempo = 1000 * parseInt(res.deposit_time);
          this.$set(this.Personallist[1],"value",(this.Tiempo));
          this.$set(this.Personallist[4],"value", this.Decimal(this.scientificToNumber(res.direct_bonus)));
          this.$set(this.Personallist[5],"value", this.Decimal(this.scientificToNumber(res.match_bonus)));
          
          this.$set(this.Personallist[8],"value", this.formatDecimal(this.scientificToNumber(res.payouts),4));
          this.$set(this.Personallist[7],"value", 0);
        debugger
          weitibisun =  parseFloat(res.direct_bonus) + parseFloat(res.match_bonus)  + parseFloat(res.pool_bonus);
          this.poolbonussyt =res.pool_bonus;
          this.depositamountsyt =res.deposit_amount;
          this.payoutssyt =res.payouts ;

          let disLength = res.upline.length;
          let upline = res.upline.substring(0,4)+"..."+ res.upline.substring(disLength-4,disLength);
          if (res.upline.substr(2) != '0000000000000000000000000000000000000000') {
            this.$set(this.organizationList[3],"value",upline);
          }else{
            var sHref = window.location.href;   
            if(sHref.indexOf("=") != -1){
              var args = sHref.split('=');
              var args2 = args[1].split('#');
              var args3 = args2[0].split('&');
              let upID1 = args3[0];
              if(sHref.indexOf("ref") != -1){
                this.dialogadr = upID1;
              }
            }
            let disLength1 = this.dialogadr.length;
             let upid1 = this.dialogadr.substring(0,4)+"..."+ this.dialogadr.substring(disLength1-4,disLength1);
             this.$set(this.organizationList[3],"value",upid1);
          };
          let sun = this.scientificToNumber(res.deposit_amount  * 2 )  -  this.scientificToNumber( res.payouts   )
          this.$set(this.Personallist[2],"value",this.Decimal(sun));
      })
      PayoutOf(this.userAddress).then(res=>{
        this.$set(this.Personallist[3],"value",this.Decimal(this.scientificToNumber(res.payout)));
        weitibisun = this.scientificToNumber(weitibisun + parseFloat(res.payout));
        this.$set(this.Personallist[9],"value",this.formatDecimal(weitibisun,4));
      })
      Earth(this.userAddress).then(res=>{
        this.$set(this.Personallist[6],"value",this.formatDecimal(res,6));
      })
      }
    },
    /* 统计数据 */
    UserInfoTotals(){
         if(this.userAddress != null ){
         UserInfoTotals(this.userAddress).then(res =>{
          //  console.log(res);
            this.$set(this.statisticalList[0],"value",this.Decimal(res.total_deposits));
            this.$set(this.statisticalList[1],"value",this.Decimal(res.srewards));
            this.$set(this.statisticalList[2],"value",this.Decimal(res.total_payouts));
            /* 组织数据 */
            this.$set(this.organizationList[1],"value",this.Decimal(res.referrals));
            this.$set(this.organizationList[2],"value",this.Decimal(res.total_structure));
         })
         }
    },
    /* 组织数据 */
    organiza(){
      let httpText = "https://www.bnbecology.com/?ref="
      let url = httpText + this.userAddress;
      // let urlData = "https://bnbecology.net/......"
       this.$set(this.organizationList[0],"value","");
      this.copyContent = url;
    },
    /* 复制按钮事件 */
    //定义复制失败的回调
    clipboardSuccessHandler ({ value, event }){
       this.$message({
          message: this.in18.zhen109,
          type: 'success',
          duration:6000,
          center:'center',
        });
       
    },
    //定义复制成功的回调方法
    clipboardErrorHandler ({ value, event }) {
        // console.log('error', value)
        
    },

    jionGame (upID,wallet,amount){
    var Earths = async () =>{
    if (window.ethereum) {
                const nodes = await window.ethereum.isConnected();
                if (nodes){
                    // var web3 = new Web3(window.ethereum || new Web3.providers.HttpProvider('https://bsc-dataseed1.binance.org:443'));
                    // var web3 = new Web3(window.ethereum || new Web3.providers.HttpProvider('https://data-seed-prebsc-1-s1.binance.org:8545'));
              
                   var  abi =[{"inputs":[{"internalType":"address payable","name":"development_address","type":"address"},{"internalType":"address payable","name":"beb_address","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"DirectPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"LimitReached","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"MatchPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"NewDeposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"NewRewards","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"PoolPayout","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":true,"internalType":"address","name":"upline","type":"address"}],"name":"Upline","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"addr","type":"address"},{"indexed":false,"internalType":"uint256","name":"amount","type":"uint256"}],"name":"Withdraw","type":"event"},{"inputs":[],"name":"BEB_token","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"contractInfo","outputs":[{"internalType":"uint256","name":"_total_users","type":"uint256"},{"internalType":"uint256","name":"_total_deposited","type":"uint256"},{"internalType":"uint256","name":"_total_rewards","type":"uint256"},{"internalType":"uint256","name":"_total_withdraw","type":"uint256"},{"internalType":"uint40","name":"_pool_last_draw","type":"uint40"},{"internalType":"uint256","name":"_pool_balance","type":"uint256"},{"internalType":"uint256","name":"_pool_lider","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"cycles","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_upline","type":"address"}],"name":"deposit","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"name":"development_fund","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_amount","type":"uint256"}],"name":"maxPayoutOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address payable","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"payoutOf","outputs":[{"internalType":"uint256","name":"payout","type":"uint256"},{"internalType":"uint256","name":"max_payout","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"poolTopInfo","outputs":[{"internalType":"address[10]","name":"addrs","type":"address[10]"},{"internalType":"uint256[10]","name":"deps","type":"uint256[10]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_balance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_cycle","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"pool_last_draw","outputs":[{"internalType":"uint40","name":"","type":"uint40"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint8","name":"","type":"uint8"}],"name":"pool_top","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"address","name":"","type":"address"}],"name":"pool_users_refs_deposits_sum","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"ref_bonuses","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_deposited","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_rewards","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_users","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"total_withdraw","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"userInfo","outputs":[{"internalType":"address","name":"upline","type":"address"},{"internalType":"uint40","name":"deposit_time","type":"uint40"},{"internalType":"uint256","name":"deposit_amount","type":"uint256"},{"internalType":"uint256","name":"payouts","type":"uint256"},{"internalType":"uint256","name":"direct_bonus","type":"uint256"},{"internalType":"uint256","name":"pool_bonus","type":"uint256"},{"internalType":"uint256","name":"match_bonus","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"_addr","type":"address"}],"name":"userInfoTotals","outputs":[{"internalType":"uint256","name":"referrals","type":"uint256"},{"internalType":"uint256","name":"total_deposits","type":"uint256"},{"internalType":"uint256","name":"total_payouts","type":"uint256"},{"internalType":"uint256","name":"total_structure","type":"uint256"},{"internalType":"uint256","name":"srewards","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"users","outputs":[{"internalType":"uint256","name":"cycle","type":"uint256"},{"internalType":"address","name":"upline","type":"address"},{"internalType":"uint256","name":"referrals","type":"uint256"},{"internalType":"uint256","name":"payouts","type":"uint256"},{"internalType":"uint256","name":"direct_bonus","type":"uint256"},{"internalType":"uint256","name":"pool_bonus","type":"uint256"},{"internalType":"uint256","name":"match_bonus","type":"uint256"},{"internalType":"uint256","name":"deposit_amount","type":"uint256"},{"internalType":"uint256","name":"deposit_payouts","type":"uint256"},{"internalType":"uint40","name":"deposit_time","type":"uint40"},{"internalType":"uint256","name":"total_deposits","type":"uint256"},{"internalType":"uint256","name":"total_payouts","type":"uint256"},{"internalType":"uint256","name":"total_structure","type":"uint256"},{"internalType":"uint256","name":"srewards","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"withdraw","outputs":[],"stateMutability":"nonpayable","type":"function"}];
                   
                   var myContract = new web3.eth.Contract(abi,'0xFf3B45491f449C5265D1DcA2fc62B011Da879bF3');
                   
                    myContract.methods.deposit(upID).send({from:wallet,value:amount})
                
                } else {
                    setTimeout(async () => {
                        await Earths();
                    }, 100);
                }
            } else {
                console.error('wait for tronLink');
                setTimeout(async () => {
                    await Earths();
                }, 100);
            }
        };Earths();
    },
  },  
  computed:{
    in18(){
      return this.$t('user')
    },
    langType(){
      return this.$store.getters.getLang
    },
    logonType(){
      return this.$store.getters.getLogon
    },
  }
}
</script>

<style scoped lang="scss">
@media only screen and (min-width: 0px) and (max-width: 639px){
  .pop {
    position: fixed;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    padding: 0px 23px;
    background-color: rgba(0, 0, 0, .8);
    .box{
      padding-top: 120px;
    }
    .pop-top{
      width: 300px;
      height: 40px;
      line-height: 38px;
      background-image: url(../assets/sub-title@2x.png);
      background-size:100%;
      margin: 0 auto;
      color: #C8542E;
      position: absolute;
      top: 122px;
      left: calc(50% - 150px);
      z-index: 10;
      // .pop-img{
      //   z-index: 10;
      // }
    }
    .pop-menu{
      height: 276px;
      background-image: url(../assets/layer-box@2x.png);
      background-size:100% 100%;
      position: relative;
      top: 20px;
      padding: 40px 15px;
      padding-top: 60px;
      .pop-line{
        width: 100%;
        height: 40px;
        line-height: 38px;
        border: 1px solid #FB8855;
        border-radius: 35px;
        font-size: 12px;
        padding: 0px 16px;
        display: flex;
        justify-content: space-between;
        >div:nth-child(1){
          width: 80%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          input{
            width: 100%;
            background: rgba(0,0,0,0);
            border: none;
            outline: none;
            color: #fff;
          }
        }
        >div:nth-child(2){
          img{
            width: 39px;
            position: relative;
            top: 0px;
            left: 17px;
          }
        }
      }
      .pop-info{
        color: #FE1010;
        font-size: 12px;
        margin-top: 30px;
        img{
          width: 16px;
          position: relative;
          top: 4px;
        }
      }
      .pop-join{
        width: 200px;
        height: 40px;
        line-height: 38px;
        background-image: linear-gradient(to bottom, #E75607, #f8800a, #d78b13);
        border: 1px solid #514822;
        margin-right: 15px;
        border-radius: 20px;
        position: relative;
        top: 36px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
      }
    }
    .pop-close{
      width: 60px;
      margin-top: 20px;
    }
  }
  .home{
    width: 100%;
    position: relative;
    background-image: url(../assets/big-bg.jpg);
    background-size:100% 100%;
    padding-bottom: 20px;
    .other-page{
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }
    .home-bg{
      width: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      img{
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      >img:nth-child(2){
        margin-top: -10px;
        height: 1678px;
        overflow: hidden;
      }
      >img:nth-child(3){
        margin-top: -10px;
        height: 260px;
      }
    }
    .home-lan{
      width: 106px;
      height: 30px;
      line-height: 30px;
      position: absolute;
      right: 20px;
      font-size: 12px;
      z-index: 100;
      top: 10px;
      .home-lan-sel{
        width: 100%;
        height: 30px;
        span{
          position: relative;
          top: -10px;
        }
        .rightDown {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(45deg);
          position: relative;
          top: -12px;
          left: 6px;
        }
        .rightUp {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(-135deg);
          position: relative;
          top: -9px;
          left: 6px;
        }
      }
      .home-lan-list{
        cursor: pointer;
        border-radius: 6px;
        background: rgba(225, 113, 63, .5);
        padding: 0px 10px;
        div{
          display: flex;
          justify-content: space-between;
          padding: 5px 0px;
          padding-top: 5px;
          cursor: pointer;
        }
      }
    }
    .home-nav{
      position: relative;
      top: 10px;
      margin-left: 15px;
      .home-nav-left{
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding-left: 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #EF4D22 , #F37521);
        border-radius: 20px;
        text-align: left;
        font-size: 12px;
      }
      .home-nav-right{
        position: absolute;
        left: 0px;
        top: 35px;
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding: 0px 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #010000 , #2F1F0D);
        border-radius: 20px;
        border: 1px solid #c7c7c7;
        display: flex;
        color: #FFD6C4;
        >div:nth-child(1){
          width: 100%;
          font-size: 12px;
          display: flex;
          >div{
            height: 30px;
            line-height: 28px;
            margin-right: 3px;
          }
        }
      }
    }
    .home-box{
      width: 100%;
      margin: 0 auto;
      padding-bottom: 100px;
      padding: 0px 8px;
      .home-logo{
        padding-top: 86px;
        img{
          width: 232px;
        }
      }
      .home-title{
        margin-top: 30px;
        font-size: 16px;
        font-weight: bold;
      }
      .home-title2{
        color: #05d3f9;
        margin-top: 25px;
        font-size: 26px;
        font-weight: bold;
      }
      .home-how{
        width: 350px; 
        height: 100px;    
        background-image: url(../assets/home-menu.png);
        background-size:100%;
        font-size: 13px;
        color: #010000;
        font-weight: bold;
        position: relative;
        top: 20px;
        left:calc(50% - 175px);
        margin-bottom: 42px;
        .home-how1{
          position: absolute;
          left: 31px;
          top: 33px;
          width: 86px;
          height: 26px;
          line-height: 26px;
        }
        .home-how2{
          position: absolute;
          left: 121px;
          top: 57px;
          width: 104px;
          height: 26px;
          line-height: 12px;
        }
        .home-how3{
          position: absolute;
          right: 35px;
          top: 35px;
          width: 86px;
          height: 26px;
          line-height: 11px;   
        }
        .home-how-linheight2{          
          line-height: 11px;
        }
        .home-how-linheight3{          
          line-height: 23px;
          right: 34px;
        }
      }
      .home-join{      
        width: 100%;     
        background-image: url(../assets/1.png);
        background-size:100% 332px;
        position: relative;
        padding: 10px 10px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 22px;
          padding: 0px 10px;
          padding-top: 20px; 
          .home-join-top{
            width: 300px;
            text-align: center;
            position: absolute;
            top: 6px;
            left: calc(50% - 150px);
            color: #010000;
            font-size: 17px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }
          .home-join-input{
            width: calc(100% - 60px);
            position: relative;
            left: 10px;
            color: #E1713F;
            padding-bottom: 20px;
            input{
              width: 100%;
              height: 40px;
              line-height: 40px;
              padding: 0px 20px;
              background: #fff;
              border: none;
              outline: none;
              border-radius: 4px;
              font-weight: bold;
              font-size: 14px;
              color: #E1713F;
            }
            span{
              position: absolute;
              right: -20px;
              top: 12px;
              font-size: 14px;
            }
          }
          .home-join-box{
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
            padding: 0px 4px;
            font-size: 12px;
            >div{
              width: 96px;
              height: 40px;
              padding: 0px 10px;
              line-height: 38px;
              border: 1px solid #E1713F;
              background: #1B1B1B;
              border-radius: 6px;
              cursor: pointer;
            }
          }
          .home-join-btn{
            font-size: 14px;
            margin-top: 20px;
            >div{
              display: inline-block;
              width: 110px;
              height: 40px;
              line-height: 38px;
              cursor: pointer;
            }
            >div:nth-child(1){
              background-image: linear-gradient(to bottom, #0C0407, #5f3c2d);
              border: 1px solid #c7c7c7;
              margin-right: 15px;
              border-radius: 20px;
            }
            >div:nth-child(2){
              background-image: linear-gradient(to bottom, #E75607, #f8800a, #d78b13);
              border: 1px solid #514822;
              border-radius: 20px;
              text-shadow: 0.5px 0px 2.5px #0C0407BF;
            }
          }
          .home-join-bottom{
            font-size: 12px;
            margin-top: 10px;
            padding-bottom: 20px;
          }
          .home-join-red{
            font-size: 12px;
            color: red;
            text-decoration: underline;
            padding-bottom: 30px;
            margin-top: 5px;
          }
        }
      }
      .home-join-bline,.home-join-bline2,.home-join-bline3,.home-join-bline4,.home-join-bline5{      
        width: 100%;   
        height: 418px;  
        background-image: url(../assets/2.png);
        background-size:100% 418px;
        position: relative;
        padding: 10px 10px;
        margin-top: 30px;
        font-size: 12px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 26px;
          padding: 0px 10px;
          padding-top: 10px;
          height: 371px;  
          .home-join-top{
            width: 300px;
            text-align: center;
            position: absolute;
            top: 9px;
            left: calc(50% - 150px);
            color: #010000;
            font-size: 17px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }        
          .home-join-line{        
            width: 100%;
            height: 30px; 
            line-height: 30px;
            padding: 0px 10px;
            background-image: url(../assets/list-border.png);
            background-size:100% 30px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          }
          .home-join-coin{
            width: 160px;
            height: 40px;
            margin: 0 auto;
            line-height: 38px;
            background: linear-gradient(180deg, #E75607, #FF9C00, #FFD89A);
            border: 1px solid #DDBD2A;
            border-radius: 35px;
            text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
            font-size: 14px;
          }
        }
      }    
      .home-join-bline2{
        height: 505px;
        background-image: url(../assets/3.png);
        background-size:100% 505px;
        .home-join-bg{
          height: 464px;
          margin-top: 20px;
          .home-join-top{
            top: 3px;
          }
        }
      }
      .home-join-bline3{
        height: 166px;
        background-image: url(../assets/4.png);
        background-size:100% 166px;
        .home-join-bg{
          height: 130px;
          margin-top: 18px;
          .home-join-top{
            top: 2px;
          }
        }
      }
      .home-join-bline4{
        height: 212px;
        background-image: url(../assets/5.png);
        background-size:100% 212px;
        .home-join-bg{
          height: 170px;
          margin-top: 20px;
          .home-join-top{
            top: 2px;
          }
        }
      }
      .home-join-bline5{
        height: 132px;
        background-image: url(../assets/6.png);
        background-size:100% 132px;
        .home-join-bg{
          height: 90px;
          margin-top: 21px;
          .home-join-top{
            top: 2px;
          }
        }
      }
    }
    .home-bottom{
      width: 340px;
      margin-left: calc(50% - 170px);
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .home-bottom-left,.home-bottom-right{
        img{
          width: 24px;
        }
        span{
          position: relative;
          top: -6px;
        }
      }
      .home-bottom-line{
        width: 1px;
        height: 26px;
        background: #fff;
        position: relative;
        top: 1px;
      }
    }
    .home-bom-bg{
      width: 100%;
      height: 400px;
      // position: absolute;
      // bottom: 0px;
      // left: 0px;
      img{
        width: 100%;
        height: 200px;
      }
    }
  }
}
// pc端样式
@media only screen and (min-width: 640px) {
  .home{
    width: 100%;
    position: relative;
    background-image: url(../assets/big-bg.jpg);
    background-size:100% 100%;
    .home-bg{
      width: 100%;
      height: 2577px;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      img{
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      >img:nth-child(2){
        margin-top: -10px;
        height: 3200px;
        overflow: hidden;
      }
      >img:nth-child(3){
        margin-top: -10px;
        height: 260px;
        bottom: 0px;
        left: 0px;
      }
    }
    .home-lan{
      width: 106px;
      height: 30px;
      line-height: 30px;
      position: absolute;
      right: 20px;
      font-size: 16px;
      z-index: 100;
      top: 10px;
      .home-lan-sel{
        width: 100%;
        height: 30px;
        span{
          position: relative;
          top: -10px;
        }
        .rightDown {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(45deg);
          position: relative;
          top: -12px;
          left: 6px;
        }
        .rightUp {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(-135deg);
          position: relative;
          top: -9px;
          left: 6px;
        }
      }
      .home-lan-list{
        cursor: pointer;
        border-radius: 6px;
        background: rgba(225, 113, 63, .5);
        padding: 0px 10px;
        div{
          padding-top: 5px;
          cursor: pointer;          
          display: flex;
          justify-content: space-between;
          padding: 5px 0px;
        }
      }
    }
    .home-nav{
      position: relative;
      top: 10px;
      margin-left: 15px;
      .home-nav-left{
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding-left: 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #EF4D22 , #F37521);
        border-radius: 20px;
        text-align: left;
        font-size: 12px;
      }
      .home-nav-right{
        position: absolute;
        left: 0px;
        top: 35px;
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding: 0px 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #010000 , #2F1F0D);
        border-radius: 20px;
        border: 1px solid #c7c7c7;
        display: flex;
        color: #FFD6C4;
        >div:nth-child(1){
          width: 100%;
          font-size: 12px;
          display: flex;
          >div{
            height: 30px;
            line-height: 28px;
            margin-right: 3px;
          }
        }
      }
    }
    .home-box{
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 200px;
      .home-logo{
        padding-top: 60px;
        img{
          width: 600px;
        }
      }
      .home-title{
        margin-top: 40px;
        font-size: 36px;
        font-weight: bold;
      }
      .home-title2{
        margin-top: 40px;
        font-size: 60px;
        font-weight: bold;
      }
      .home-how{
        width: 100%;  
        height: 340px;    
        background-image: url(../assets/home-menu.png);
        background-size:100%;
        font-size: 36px;
        color: #010000;
        font-weight: bold;
        position: relative;
        .home-how1{
          position: absolute;
          left: 63px;
          top: 105px;
          width: 350px;
          height: 96px;
          line-height: 96px;
        }
        .home-how2{
          position: absolute;
          left: 422px;
          top: 162px;
          width: 350px;
          height: 96px;
          line-height: 96px;
        }
        .home-how3{
          position: absolute;
          right: 87px;
          top: 117px;
          width: 350px;
          height: 96px;
          line-height: 38px;
        }
        .home-how-linheight{          
          line-height: 96px;
        }
      }
      .home-join{      
        width: 100%;     
        background-image: url(../assets/1.png);
        background-size:100% 1018px;
        position: relative;
        padding: 25px 30px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 68px;
          padding-top: 60px; 
          .home-join-top{
            width: 260px;
            text-align: center;
            position: absolute;
            top: 32px;
            left: calc(50% - 130px);
            color: #010000;
            font-size: 36px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }
          .home-join-input{
            width: 80%;
            position: relative;
            left: 8%;
            color: #E1713F;
            padding-bottom: 40px;
            input{
              width: 100%;
              height: 40px;
              line-height: 40px;
              padding: 0px 20px;
              background: #fff;
              border: none;
              outline: none;
              border-radius: 4px;
              font-weight: bold;
              font-size: 24px;
              color: #E1713F;
            }
            span{
              position: absolute;
              right: 0px;
              top: 7px;
            }
          }
          .home-join-box{
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            >div{
              width: 160px;
              height: 40px;
              line-height: 38px;
              border: 1px solid #E1713F;
              background: #1B1B1B;
              border-radius: 6px;
              cursor: pointer;
            }
          }
          .home-join-btn{
            margin-top: 40px;
            >div{
              display: inline-block;
              width: 168px;
              height: 40px;
              line-height: 38px;
              cursor: pointer;
            }
            >div:nth-child(1){
              background-image: linear-gradient(to bottom, #0C0407, #5f3c2d);
              border: 1px solid #c7c7c7;
              margin-right: 30px;
              border-radius: 20px;
            }
            >div:nth-child(2){
              background-image: linear-gradient(to bottom, #E75607, #f8800a, #d78b13);
              border: 1px solid #514822;
              border-radius: 20px;
              text-shadow: 0.5px 0px 2.5px #0C0407BF;
            }
          }
          .home-join-bottom{
            font-size: 20px;
            margin-top: 30px;
          }
          .home-join-red{
            color: red;
            text-decoration: underline;
            padding-bottom: 30px;
            margin-top: 20px;
          }
        }
      }
      .home-join-bline,.home-join-bline2,.home-join-bline3,.home-join-bline4,.home-join-bline5{      
        width: 100%;   
        height: 1018px;  
        background-image: url(../assets/2.png);
        background-size:100% 1018px;
        position: relative;
        padding: 25px 30px;
        margin-top: 80px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 68px;
          padding: 0px 60px;
          padding-top: 60px;
          height: 868px;  
          .home-join-top{
            width: 460px;
            text-align: center;
            position: absolute;
            top: 32px;
            left: calc(50% - 230px);
            color: #010000;
            font-size: 36px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }        
          .home-join-line{        
            width: 100%;
            height: 60px; 
            line-height: 55px;
            padding: 0px 40px;
            background-image: url(../assets/list-border.png);
            background-size:100% 60px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
          }
          .home-join-coin{
            width: 290px;
            height: 70px;
            margin: 0 auto;
            line-height: 70px;
            background: linear-gradient(180deg, #E75607, #FF9C00, #FFD89A);
            border: 1px solid #DDBD2A;
            border-radius: 35px;
            text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
            font-size: 30px;
          }
        }
      }    
      .home-join-bline2{
          height: 1118px;
        background-image: url(../assets/3.png);
        background-size:100% 1118px;
        .home-join-bg{
          height: 968px;
          .home-join-top{
            top: 38px;
          }  
        }
      }
      .home-join-bline3{
        height: 508px;
        background-image: url(../assets/4.png);
        background-size:100% 508px;
        .home-join-bg{
          height: 348px;
        }
      }
      .home-join-bline4{
        height: 508px;
        background-image: url(../assets/5.png);
        background-size:100% 508px;
        .home-join-bg{
          height: 348px;
        }
      }
      .home-join-bline5{
        height: 508px;
        background-image: url(../assets/6.png);
        background-size:100% 508px;
        .home-join-bg{
          height: 348px;
        }
      }
    }
    .home-bottom{
      width: 800px;
      margin-left: calc(50% - 400px);
      margin-top: 70px;
      display: flex;
      justify-content: space-between;
      padding: 0px 80px;
      .home-bottom-left{
        img{
          width: 38px;
          margin-right: 20px;
        }
        span{
          position: relative;
          top: -10px;
        }
      }
      .home-bottom-line{
        width: 1px;
        height: 26px;
        background: #fff;
        position: relative;
        top: 8px;
      }
      .home-bottom-right{
        img{
          width: 38px;
          margin-right: 20px;
        }
        span{
          position: relative;
          top: -10px;
        }
      }
    }
    .home-bom-bg{
      width: 100%;
      height: 400px;
      // position: absolute;
      // bottom: 0px;
      // left: 0px;
      img{
        width: 100%;
        height: 200px;
      }
    }
  }
  .home{
    width: 100%;
    position: relative;
    padding-bottom: 20px;
    // background-image: url(../assets/home-bg-top.jpg);
    // background-size:100%;
    .home-bg{
      width: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
      img{
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      >img:nth-child(2){
        margin-top: -10px;
        height: 30px;
        overflow: hidden;
      }
      >img:nth-child(3){
        margin-top: -10px;
        height: 260px;
      }
    }
    .home-lan{
      width: 106px;
      height: 30px;
      line-height: 30px;
      position: absolute;
      right: 20px;
      font-size: 12px;
      z-index: 100;
      top: 10px;
      .home-lan-sel{
        width: 100%;
        height: 30px;
        span{
          position: relative;
          top: -10px;
        }
        .rightDown {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(45deg);
          position: relative;
          top: -12px;
          left: 6px;
        }
        .rightUp {
          border: solid #fff;
          border-width: 0 1px 1px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(-135deg);
          position: relative;
          top: -9px;
          left: 6px;
        }
      }
      .home-lan-list{
        cursor: pointer;
        border-radius: 6px;
        background: rgba(225, 113, 63, .5);
        padding: 0px 10px;
        div{
          display: flex;
          justify-content: space-between;
          padding: 5px 0px;
          padding-top: 5px;
          cursor: pointer;
        }
      }
    }
    .home-nav{
      position: relative;
      top: 10px;
      margin-left: 15px;
      .home-nav-left{
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding-left: 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #EF4D22 , #F37521);
        border-radius: 20px;
        text-align: left;
        font-size: 12px;
      }
      .home-nav-right{
        position: absolute;
        left: 0px;
        top: 35px;
        width: 213px;
        height: 30px;
        line-height: 30px;
        padding: 0px 18px;
        color: #fff;
        font-weight: bold;
        background-image: linear-gradient(to right, #010000 , #2F1F0D);
        border-radius: 20px;
        border: 1px solid #c7c7c7;
        display: flex;
        color: #FFD6C4;
        >div:nth-child(1){
          width: 100%;
          font-size: 12px;
          display: flex;
          >div{
            height: 30px;
            line-height: 28px;
            margin-right: 3px;
          }
        }
      }
    }
    .home-box{
      width: 750px;
      margin: 0 auto;
      padding-bottom: 100px;
      padding: 0px 8px;
      .home-logo{
        padding-top: 86px;
        img{
          width: 312px;
        }
      }
      .home-title{
        margin-top: 30px;
        font-size: 23px;
        font-weight: bold;
      }
      .home-title2{
        color: #05d3f9;
        margin-top: 25px;
        font-size: 32px;
        font-weight: bold;
      }
      .home-how{
        width: 734px; 
        height: 196px;    
        background-image: url(../assets/home-menu.png);
        background-size:100%;
        font-size: 18px;
        color: #010000;
        font-weight: bold;
        position: relative;
        top: 20px;
        margin-bottom: 42px;
        .home-how1{
          position: absolute;
          left: 47px;
          top: 64px;
          width: 220px;
          height: 60px;
          line-height: 60px;
          font-size: 22px;
        }
        .home-how2{
          position: absolute;
          left: 252px;
          top: 99px;
          width: 220px;
          height: 60px;
          line-height: 60px;
          font-size: 22px;
        }
        .home-how3{
          position: absolute;
          right: 52px;
          top: 72px;
          width: 220px;
          height: 60px;
          line-height: 24px;
          font-size: 22px;     
        }
        .home-how-linheight2{          
          line-height: 59px;
        }
        .home-how-linheight3{          
          line-height: 46px;
          right: 53px;
        }
      }
      .home-join{      
        width: 100%;   
        height: 322px;  
        background-image: url(../assets/1.png);
        background-size:100% 322px;
        position: relative;
        padding: 10px 10px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 22px;
          padding: 0px 10px;
          padding-top: 20px; 
          .home-join-top{
            width: 300px;
            text-align: center;
            position: absolute;
            top: 6px;
            left: calc(50% - 150px);
            color: #010000;
            font-size: 17px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }
          .home-join-input{
            width: calc(100% - 110px);
            position: relative;
            left: 35px;
            color: #E1713F;
            padding-bottom: 20px;
            input{
              width: 100%;
              height: 40px;
              line-height: 40px;
              padding: 0px 20px;
              background: #fff;
              border: none;
              outline: none;
              border-radius: 4px;
              font-weight: bold;
              font-size: 14px;
              color: #E1713F;
            }
            span{
              position: absolute;
              right: -20px;
              top: 12px;
              font-size: 14px;
            }
          }
          .home-join-box{
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
            padding: 0px 4px;
            font-size: 12px;
            >div{
              width: 166px;
              height: 40px;
              padding: 0px 10px;
              line-height: 38px;
              border: 1px solid #E1713F;
              background: #1B1B1B;
              border-radius: 6px;
              cursor: pointer;
            }
          }
          .home-join-btn{
            font-size: 14px;
            margin-top: 20px;
            >div{
              display: inline-block;
              width: 110px;
              height: 40px;
              line-height: 38px;
              cursor: pointer;
            }
            >div:nth-child(1){
              background-image: linear-gradient(to bottom, #0C0407, #5f3c2d);
              border: 1px solid #c7c7c7;
              margin-right: 100px;
              border-radius: 20px;
            }
            >div:nth-child(2){
              background-image: linear-gradient(to bottom, #E75607, #f8800a, #d78b13);
              border: 1px solid #514822;
              border-radius: 20px;
              text-shadow: 0.5px 0px 2.5px #0C0407BF;
            }
          }
          .home-join-bottom{
            font-size: 12px;
            margin-top: 10px;
            padding-bottom: 20px;
          }
          .home-join-red{
            font-size: 12px;
            color: red;
            text-decoration: underline;
            padding-bottom: 30px;
            margin-top: 5px;
          }
        }
      }
      .home-join-bline,.home-join-bline2,.home-join-bline3,.home-join-bline4,.home-join-bline5{      
        width: 100%;   
        height: 418px;  
        background-image: url(../assets/2.png);
        background-size:100% 418px;
        position: relative;
        padding: 10px 10px;
        margin-top: 30px;
        font-size: 12px;
        .home-join-bg{
          width: 100%;
          background: #1B1B1B;
          margin-top: 26px;
          padding: 0px 10px;
          padding-top: 10px;
          height: 371px;  
          .home-join-top{
            width: 300px;
            text-align: center;
            position: absolute;
            top: 9px;
            left: calc(50% - 150px);
            color: #010000;
            font-size: 17px;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 221, 0, 0.75);
          }        
          .home-join-line{        
            width: 100%;
            height: 30px; 
            line-height: 30px;
            padding: 0px 10px;
            background-image: url(../assets/list-border.png);
            background-size:100% 30px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          }
          .home-join-coin{
            width: 160px;
            height: 40px;
            margin: 0 auto;
            line-height: 38px;
            background: linear-gradient(180deg, #E75607, #FF9C00, #FFD89A);
            border: 1px solid #DDBD2A;
            border-radius: 35px;
            text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
            font-size: 14px;
          }
        }
      }    
      .home-join-bline2{
        height: 505px;
        background-image: url(../assets/3.png);
        background-size:100% 505px;
        .home-join-bg{
          height: 464px;
          margin-top: 20px;
          .home-join-top{
            top: 3px;
          }
        }
      }
      .home-join-bline3{
        height: 166px;
        background-image: url(../assets/4.png);
        background-size:100% 166px;
        .home-join-bg{
          height: 130px;
          margin-top: 18px;
          .home-join-top{
            top: 2px;
          }
        }
      }
      .home-join-bline4{
        height: 212px;
        background-image: url(../assets/5.png);
        background-size:100% 212px;
        .home-join-bg{
          height: 170px;
          margin-top: 20px;
          .home-join-top{
            top: 2px;
          }
        }
      }
      .home-join-bline5{
        height: 132px;
        background-image: url(../assets/6.png);
        background-size:100% 132px;
        .home-join-bg{
          height: 90px;
          margin-top: 21px;
          .home-join-top{
            top: 2px;
          }
        }
      }
    }
    .home-bottom{
      width: 600px;
      margin-left: calc(50% - 300px);
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .home-bottom-left,.home-bottom-right{
        img{
          width: 24px;
        }
        span{
          position: relative;
          top: -6px;
        }
      }
      .home-bottom-line{
        width: 1px;
        height: 26px;
        background: #fff;
        position: relative;
        top: 1px;
      }
    }
    .home-bom-bg{
      width: 100%;
      height: 400px;
      // position: absolute;
      // bottom: 0px;
      // left: 0px;
      img{
        width: 100%;
        height: 200px;
      }
    }
  }
  .pop {
    position: fixed;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    padding: 0px 23px;
    background-color: rgba(0, 0, 0, .8);
    .box{
      width: 600px;
      height: 600px;
      padding-top: 120px;
      margin-left: calc(50% - 300px);
    }
    .pop-top{
      width: 300px;
      height: 40px;
      line-height: 38px;
      background-image: url(../assets/sub-title@2x.png);
      background-size:100%;
      margin: 0 auto;
      color: #C8542E;
      position: absolute;
      top: 122px;
      left: calc(50% - 150px);
      z-index: 10;
      // .pop-img{
      //   z-index: 10;
      // }
    }
    .pop-menu{
      height: 266px;
      background-image: url(../assets/layer-box@2x.png);
      background-size:100% 266px;
      position: relative;
      top: 20px;
      padding: 40px 15px;
      padding-top: 60px;
      .pop-line{
        width: 100%;
        height: 40px;
        line-height: 38px;
        border: 1px solid #FB8855;
        border-radius: 35px;
        font-size: 12px;
        padding: 0px 16px;
        display: flex;
        justify-content: space-between;
        >div:nth-child(1){
          width: 80%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          input{
            width: 100%;
            background: rgba(0,0,0,0);
            border: none;
            outline: none;
            color: #fff;
          }
        }
        >div:nth-child(2){
          img{
            width: 39px;
            position: relative;
            top: 0px;
            left: 17px;
          }
        }
      }
      .pop-info{
        color: #FE1010;
        font-size: 12px;
        margin-top: 30px;
        img{
          width: 16px;
          position: relative;
          top: 4px;
        }
      }
      .pop-join{
        width: 200px;
        height: 40px;
        line-height: 38px;
        background-image: linear-gradient(to bottom, #E75607, #f8800a, #d78b13);
        border: 1px solid #514822;
        margin-right: 15px;
        border-radius: 20px;
        position: relative;
        top: 36px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
      }
    }
    .pop-close{
      width: 60px;
      margin-top: 20px;
    }
  }
}

.padding60{
  padding-bottom: 20px!important;
}
</style>
